<template>
	<div class="s-canvas">
		<canvas id="s-canvas" ref="sCanvas" :width="contentWidth" :height="contentHeight"></canvas>
	</div>
</template>

<script>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';

export default {
	name: 'SIdentify',
	props: {
		identifyCode: {
			type: String,
			default: '1234',
		},
		fontSizeMin: {
			type: Number,
			default: 16,
		},
		fontSizeMax: {
			type: Number,
			default: 40,
		},
		backgroundColorMin: {
			type: Number,
			default: 180,
		},
		backgroundColorMax: {
			type: Number,
			default: 240,
		},
		colorMin: {
			type: Number,
			default: 50,
		},
		colorMax: {
			type: Number,
			default: 160,
		},
		lineColorMin: {
			type: Number,
			default: 40,
		},
		lineColorMax: {
			type: Number,
			default: 180,
		},
		dotColorMin: {
			type: Number,
			default: 0,
		},
		dotColorMax: {
			type: Number,
			default: 255,
		},
		contentWidth: {
			type: Number,
			default: 128,
		},
		contentHeight: {
			type: Number,
			default: 38,
		},
	},
	setup(props) {
		const sCanvas = ref(null);

		const randomNum = (min, max) => Math.floor(Math.random() * (max - min) + min);

		const randomColor = (min, max) => {
			const r = randomNum(min, max);
			const g = randomNum(min, max);
			const b = randomNum(min, max);
			return `rgb(${r},${g},${b})`;
		};

		const drawPic = () => {
			const canvas = sCanvas.value;
			const ctx = canvas.getContext('2d');
			ctx.textBaseline = 'bottom';

			// 绘制背景
			ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
			ctx.fillRect(0, 0, props.contentWidth, props.contentHeight);

			// 绘制文字
			for (let i = 0; i < props.identifyCode.length; i++) {
				drawText(ctx, props.identifyCode[i], i);
			}

			drawLine(ctx);
			drawDot(ctx);
		};

		const drawText = (ctx, txt, i) => {
			ctx.fillStyle = randomColor(props.colorMin, props.colorMax);
			ctx.font = `${randomNum(props.fontSizeMin, props.fontSizeMax)}px SimHei`;
			const x = (i + 1) * (props.contentWidth / (props.identifyCode.length + 1));
			const y = randomNum(props.fontSizeMax, props.contentHeight - 5);
			const deg = randomNum(-45, 45);

			// 修改坐标原点和旋转角度
			ctx.translate(x, y);
			ctx.rotate((deg * Math.PI) / 180);
			ctx.fillText(txt, 0, 0);
			// 恢复坐标原点和旋转角度
			ctx.rotate((-deg * Math.PI) / 180);
			ctx.translate(-x, -y);
		};

		const drawLine = (ctx) => {
			for (let i = 0; i < 4; i++) {
				ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax);
				ctx.beginPath();
				ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
				ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
				ctx.stroke();
			}
		};

		const drawDot = (ctx) => {
			for (let i = 0; i < 80; i++) {
				ctx.fillStyle = randomColor(0, 255);
				ctx.beginPath();
				ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);
				ctx.fill();
			}
		};

		watch(() => props.identifyCode, drawPic);

		onMounted(drawPic);

		onBeforeUnmount(() => {
			// 清理工作，如果有需要
		});

		return { sCanvas, contentWidth: props.contentWidth, contentHeight: props.contentHeight };
	},
};
</script>

<style lang="scss" scoped>
.s-canvas {
	height: 38px;
}
</style>
